<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>左侧伸缩式菜单</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="menu">
		<div class="logo">
		</div>
		<ul>
			<li>
				<img src="images/1.png" >网页制作
				<div class="con" style="display: block;">
					<img src="images/con1.png">
				</div>
			</li>
			<li>
				<img src="images/2.png">java课程
				<div class="con">
					<img src="images/con2.png">
				</div>
			</li>
			<li>
				<img src="images/3.png">C++课程
				<div class="con">
					<img src="images/con3.png">
				</div>
			</li>
			<li>
				<img src="images/4.png">Scoi课程
				<div class="con">
					<img src="images/con4.png">
				</div>
			</li>
		</ul>
	</div>
</body>
<script src='js/jquery-3.1.0.min.js'></script>
<script type="text/javascript">
/*slideToggle缓慢拉出的属性*/
/*点击con也会缩回，需要终止con的缩回事件（冒泡事件）用stopPropagation*/
	$('.menu ul li .con').click(function(event){
		event.stopPropagation();
	})
	$('.menu ul li').click(function(){
		$(this).find('.con').slideToggle('slow');
		/*不能写成$(this).find('.con').slideToggle('slow').siblings().slideUp();因为siblings();指的是除这个li之外的其他所有li而不是con*/
		$(this).siblings().find('.con').slideUp();
	})
</script>
</html>